<template>
    <div class="page">
      <div class="page-search"></div>
      <div class="page-body">

        <div class="toolbar">
        <div class="toolbar__left">
          <el-button type="info" @click="refresh" >刷新</el-button>
          <el-button type="primary" @click="handleAdd">新增</el-button>
          <el-popconfirm title="你确定要删除选中的数据吗？" @confirm="handleDelete(checkedIds)">
           <template #reference>
            <el-button type="danger" :disabled="checkedIds.length<=0" >删除 </el-button>
           </template>
          </el-popconfirm>
        </div>
        <div class="toolbar__right"></div>
      </div>
        <div class="table">
            <el-table  v-loading="loading" border :data="tableData" stripe style="width: 100%" 
            @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" />
                <el-table-column label="名称" prop="name" />
                <el-table-column label="标识" prop="label" />
                <el-table-column label="备注" prop="remark" />
                <el-table-column label="创建时间" prop="createTime"  />
                <el-table-column label="跟新时间" prop="updateTime" />
                <el-table-column label="操作">
                    <template #default="{ row }">
            <el-button 
            size="small" 
            @click="handleEdit(row)"
              >编辑</el-button
            > 
  <el-popconfirm title="你确定要删除这条数据吗?" @confirm="handleDelete(row.id)">
    <template #reference>
      <el-button size="small" type="danger">删除</el-button >
    </template>
  </el-popconfirm>
      </template>
                </el-table-column>
             </el-table>
        </div>
      </div>  
      <el-dialog v-model="dialog.visible" :title="dialog.title" destroy-on-close>
       <UpsertForm ref="upsertfrom"
        @success="handleSuccess"
        @cancel="handleCancel"
        />
      </el-dialog>

    </div>
</template>

<script>

import UpsertForm from './components/upsert-form.vue';
import { getRoleList , delRole} from '@/api/role';
import { ElMessage } from 'element-plus'
    export default {

      components : {
        UpsertForm,
      },
       data(){
        return {
            //当前勾选的数据id集合
            checkedIds : [],
            //数据请求中
            loading : false,
            //表格数据
            tableData : [],
            //控制dialog相关数据的状态
            dialog:{
              visible : false,
              title : '',
            }
        };
       },
       methods : {
        /**
         * 获取数据
         */
         refresh(){
            this.loading = true;
            getRoleList().then((data)=>{
                //console.log(data);
                this.tableData = data;
            }).finally(()=>{
                this.loading = false;
            })
         },
         /**
          * 处理勾选
          */
          handleSelectionChange(rows){
            
            this.checkedIds = rows.map((item)=>item.id)

          },
         /**
          * 处理新增
          */
         handleAdd(){
          this.dialog.visible = true;
          this.dialog.title = '新增';
          
         },
         /**
          * 编辑函数
          */
         handleEdit(row){
          this.dialog.visible = true;
          this.dialog.title = '编辑';
          this.$nextTick( ()=> {
           // setModel
           this.$refs.upsertfrom.setModel({
            id:row.id,
            name:row.name,
            label:row.label,
            remark:row.remark,                                                                            
            menuIdList:row.menuIdList,
           })
          })
         },
         /**
          * 新增成功的消息提示//并且刷新页面，关闭dialog,清空表单数据
          */
         handleSuccess() {
          ElMessage({
              message: '成功',
              type: 'success',
  });
          this.dialog.visible = false;
          this.refresh()
         },
         /**
          * 处理取消和编辑的dialog状态,清空表单数据
          */
          handleCancel(){ 
            this.dialog.visible = false;
           
          },
          /**
           * 处理删除函数
           */
         handleDelete(id){
          //删除有两种id形式，全选和单选
           delRole({
            ids: Array.isArray(id) ? id : [id],
            }).then(()=>{
              ElMessage.success("删除成功")
              this.refresh();
            })
           
           }
       },
       created() {
        this.refresh();
       }
}
</script>



<style lang="scss" scoped>
.page-search {
    height: 60px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
}

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    &__left {
        flex: 1;

    }
    &__right {
        
        width: 100px;
        height: 30px;
        background-color: red;
    }
}

</style>